<template>
    <div>
        <ul class="mui-table-view">
            <router-link to="/major/order" tag="li" class="mui-table-view-cell">
                <img src="" alt="">
                <span  class="mui-navigate-right">我的订单</span>
            </router-link>
            <router-link to=""  tag="li" class="mui-table-view-cell">
                <img src="" alt="">
                <span  @click="xx" class="mui-navigate-right">积分商城</span>
            </router-link>
            <router-link to="" tag="li" class="mui-table-view-cell">
                <img src="" alt="">
                <span @click="xx" class="mui-navigate-right">饿了么会员卡</span>
            </router-link>
        </ul>

        <ul class="mui-table-view">
            <router-link to="" tag="li" class="mui-table-view-cell">
                <img src="" alt="">
                <span @click="xx" class="mui-navigate-right">服务中心</span>
            </router-link>
            <router-link to="/xiazai" tag="li" class="mui-table-view-cell">
                <img src="" alt="">
                <span class="mui-navigate-right">下载饿了么APP</span>
            </router-link>
        </ul>
        
    </div>
</template>

<script>
import { MessageBox } from 'mint-ui'
export default {
    components: {
    },
    data() {
        return {
MessageBox
        };
    },
    methods: {
        xx(){
            MessageBox('提示', '暂未开放');
        }
    },
}
</script>
<style  scoped>
img{
    margin-top: -3vw;
    position: absolute;
    top: 50%;
    height: 6vw;
    width: 6vw;
    border:none;
    margin-left: 3vw;
}
.mui-table-view-cell{
    padding:5px;
    margin: 0;
    
}
.mui-navigate-right{
    margin-left: 15vw;
    padding: 2vw 0;
    font-size: 4vw;
    width: 100%
}
ul:first-child{
    margin-bottom :5vw;
}
.mui-table-view-cell::after{
    background-color:inherit
}
li:first-child{
    border-bottom:#c8c7cc 1px solid
}
ul:first-child>li:last-child{
    border-top:#c8c7cc 1px solid
}
li{
    background-color: #f5f5f5 !important;
}
</style>